<template>
  <!-- <div>
    <h1>欢迎来到智慧决策中心</h1>
    <Preview ref="paneViewPreviewRef" :component-data="componentData" :canvas-style-data="styleData" :show-type="'width'"
      :panel-info="info" :enable-active="false" />
  </div> -->
  <fullscreen style="height: 100%; background: #f7f8fa; overflow-y: auto; width: 100%">
    <Preview
      v-if="show"
      :component-data="componentData"
      :canvas-style-data="styleData"
      :panel-info="info"
      :enable-active="false"
      :in-screen="false"
    />
  </fullscreen>
</template>

<script>
import Preview from '@/components/canvas/components/editor/Preview'
import { initPanelData } from '@/api/panel/panel'
import { mapState } from 'vuex'
import { getNowCanvasComponentData } from '@/components/canvas/utils/utils'
export default {
  name: 'MView',
  components: {
    Preview,
  },
  props: {
    resourceId: {
      type: String,
      default: null,
    },
  },
  data() {
    return {
      canvasId: 'canvas-main',
      componentData: [],
      styleData: {},
      info: {},
      show: false,
    }
  },
  computed: {
    mainCanvasComponentData() {
      return getNowCanvasComponentData(this.canvasId)
    },
    ...mapState(['componentData', 'canvasStyleData', 'panelViewDetailsInfo']),
    panelInfo() {
      return this.$store.state.panel.panelInfo
    },
  },
  created() {},
  methods: {
    async getData() {
      this.show = false
      initPanelData(this.resourceId, false, () => {
        this.componentData = getNowCanvasComponentData(this.canvasId).filter((item) => item.mobileSelected)
        this.styleData = this.canvasStyleData
        this.info = this.panelInfo
        this.$nextTick(() => {
          this.show = true
        })
      })
    },
  },
}
</script>

<style lang="scss" scoped>
.dashboard {
  height: 100%;
}

::v-deep .component-outer:hover {
  box-shadow: none;
}
</style>
